/* 
在React中的路由懒加载：

- 需要导入react包中的俩个成员
  - lazy，其是一个方法，负责去import对应的组件的
        语法:const 变量 = lazy(() => import("组件路径"))
  - Suspense：其是一个组件，负责去应用组件的以及可以制定懒加载时需要的提示组件
      语法:<Suspense fallback={<Loading组件 />}>路由规划</Suspense>

*/
import React,{ lazy, Suspense } from "react";
import { Route, Redirect, Switch } from "react-router-dom";
//导入加载提示 loading 组件
import Loading from '../components/Loading';
//使用lazy导入需要的组件
const Login = lazy(() => import('../views/login'))
const Dashboard = lazy(() => import('../views/Dashboard'))
// const Welcome = lazy(() => import('../views/Welcome'))
// const Fails = lazy(() => import('../views/Fails'))

//编写路由规则
const Routes = () => {
    return (
        // fallback后要以标签名的形式显示<Loading></Loading>
        <Suspense fallback={<Loading />}>
            <Switch>
                <Redirect from="/" to="/dashboard/welcome" exact />
                <Route path="/login" component={Login} />
                <Route path="/dashboard" component={Dashboard} />
                {/* <Route path="/dashboard/welcome" component={Welcome} /> */}
                {/* <Route path="/dashboard/film/index" component={Fails} /> */}
            </Switch>
        </Suspense>
    )
}
//导出路由规则
export default Routes;